Курс Верстальщик сайтов - HTML, CSS, Bootstrap, JavaScript

5Premium

Когда-то уже изучали HTML и CSS, но так и не научились верстать макеты? Или просто проявляете первый интерес к веб-разработке? Курс Верстальщик сайтов станет отличной стартовой площадкой для того, чтобы войти в мир IT/web.
Получите необходимый набор навыков по работе с HTML, CSS, JavaScript и дополнительными инструментами, создайте себе портфолио и станьте профессионалом!

Начать обучение Регистрация

О курсе - Чему Вы научитесь?

В рамках курса вы научитесь верстать по дизайнерским макетам - адаптивно, семантически, кроссбраузерно, с анимацией и интерактивными JavaScript элементами. Научитесь писать js-код самостоятельно и использовать готовые, проверенные временем решения.

Чему вы научитесь

Освойте на практике необходимые инструменты современной верстки сайтов и начните работать в сфере веб-разработки!

  • Установка и работа с редактором кода Visual Studio Code
  • Основы HTML и CSS
  • Структура HTML-документа, базовые теги, атрибуты
  • Подключение CSS-стилей, селекторы, свойства
  • Работа с текстом, ссылками, изображениями и другими элементами страницы
  • Полный цикл верстки макета на практике
  • Верстка веб-страниц по макетам, как верстать страницы именно так, как было задумано дизайнером
  • Блочная верстка
  • Семантическая и валидная верстка
  • Адаптив (верстка под разные устройства) и кроссбраузерность
  • Анимации и трансформации
  • Методология БЭМ
  • Современный подход в верстке FlexBox
  • Препроцессор SASS/SCSS
  • Bootstrap - работа с сеткой и использование компонентов Bootstrap на практике
  • Нарезка макетов Photoshop, Figma, Zeplin
  • JavaScript для верстальщика
  • Создание слайдера, модального окна, табов, фильтра карточек на практике
  • Использование js-библиотек - jQuery, галерея, анимации, параллакс-эффект, слайдер
  • CSS Grid - мощный современный способ позиционирования элементов веб-сайта и др.

Для кого этот курс
  • Начинающие веб-разработчики
  • Те, кто когда-то изучал верстку и хочет актуализировать знания и стать профессионалом
  • Кто уже работает, но отстал от технологий или не мог ранее освоить JS

Начните свой путь в мир IT с веба. И этот курс станет для вас отличной платформой для дальнейших успехов в профессии!

Начать обучение

Получите +2 проекта в личное портфолио

В курсе много практики и часть выполненных вами проектов, заданий и работ вы сможете разместить в ваше личное портфолио для демонстрации потенциальным работодателям и заказчикам.

Начать обучение

План курса

Программа обучения включает видео уроки по изучению верстки сайтов с нуля. Благодаря практическим урокам, Вы сможете закрепить полученные знания и создать собственные сайты на практике.

развернуть все

свернуть все

Введение - О курсе Верстальщик сайтов - HTML, CSS, Bootstrap, JavaScript
2. Основы CSS
  • 2.1 Что такое CSS. Подключение CSS. Практика работы со стилями07:30
  • 2.2 Работа с цветом. HEX-коды цвета и как их использовать. Прозрачность17:39
  • 2.3 Как связать HTML и CSS. Подключение нескольких стилей06:31
  • 2.4 Селекторы. Выборки по тегам, по классам, по идентификатору08:47
  • 2.5 Использование вложенности/каскадов. Наследование свойств. Знакомство с div и span08:17
3. Использование HTML и CSS на практике
  • 3.1 Работа с текстом. Списки12:40
  • 3.2 Работа с текстом. Подключение шрифтов. Google шрифты27:25
  • 3.3 Работа с текстом. Стилизация, свойства, единицы измерения19:20
  • 3.4 Работа с блочными элементами26:39
  • 3.5 Стилизация блочных элементов29:29
  • 3.6 Работа со ссылками и кнопками37:31
  • 3.7 Работа с изображениями и иконками30:20
  • 3.8 Автоматическое форматирование в VS Code07:43
  • 3.9 Псевдоклассы и псевдоэлементы CSS25:54
  • 3.10 Структура сайта и типы макетов07:24
  • 3.11 Таблицы и табличная верстка23:41
  • 3.12 Блочная модель верстки old-style23:37
  • 3.13 Позиционирование, выпадающее меню31:39
  • 3.14 Введение во FlexBox16:47
  • 3.15 Блочная модель верстки на флексах19:36
4. Работа с макетами
  • 4.1 Нарезка макета в Photoshop27:10
  • 4.2 Zeplin и импорт из Photoshop или Figma30:02
  • 4.3 Мастер-класс по верстке макета22:17
5. Продвинутые техники HTML, CSS
  • 5.1 Основы БЭМ32:32
  • 5.2 Элементы форм52:35
  • 5.3 Добавление аудио и видео15:46
  • 5.4 Фильтры CSS05:56
  • 5.5 Семантические теги HTML529:54
  • 5.6 Кроссбраузерность29:24
  • 5.7 Трансформации CSS327:08
  • 5.8 Анимации CSS319:41
  • 5.9 Работа с адаптивом39:29
  • 5.10 Базовое использование препроцессора SASS|SCSS34:12
  • 5.11 Продвинутое использование SASS|SCSS23:55
6. Bootstrap
  • 6.1 Общие возможности Bootstrap24:57
  • 6.2 Работа с сеткой Bootstrap36:02
  • 6.3 Использование компонентов Bootstrap28:47
7. JavaScript для верстальщика
  • 7.1 Введение в JavaScript28:27
  • 7.2 Ветвления и циклы23:27
  • 7.3 Объекты и массивы JS17:20
  • 7.4 Функции JS16:56
  • 7.5 Понятие DOM и узлов26:24
  • 7.6 Обработка события по клику19:54
  • 7.7 Создание слайдера на JS24:59
  • 7.8 Создание модального окна15:17
  • 7.9 Создание табов17:41
  • 7.10 Создание фильтра карточек18:36
8. Библиотеки JavaScript
  • 8.1 Основы jQuery16:22
  • 8.2 Галерея FancyBox15:52
  • 8.3 Анимации ParollerJS, ParallaxJS17:58
  • 8.4 Анимации ScrollMagic18:54
  • 8.5 Адаптивный слайдер SwiperJS24:35
9. Спецификация CSS Grid
  • 9.1 CSS Grid. Базовая терминология15:15
  • 9.2 Базовые возможности CSS Grid19:02
  • 9.3 Шаблоны и фракции16:00
  • 9.4 Grid области и работа с ними15:12
  • 9.5 Выравнивание12:14
  • 9.6 Методы адаптива18:56
  • 9.7 Нюансы использования11:10
10. Проект Вёрстки макета От и До
  • 10.1 Обзор шаблона для вёрстки06:10
  • 10.2 UI Kit - что и зачем06:57
  • 10.3 Настройка окружения10:49
  • 10.4 Переменные и типографика33:08
  • 10.5 Компонент "Особенность"07:23
  • 10.6 Компонент "Скриншот"12:34
  • 10.7 Компонент "Отзыв"22:27
  • 10.8 Компонент "Цена"25:09
  • 10.9 Компоненты формы и иконок соцсетей14:13
  • 10.10 Вводный блок сайта21:01
  • 10.11 Блок "О продукте"11:28
  • 10.12 Блок "Особенности"10:29
  • 10.13 Блок "Скриншоты"07:38
  • 10.14 Блок "Отзывы"06:17
  • 10.15 Блок "Цены"09:15
  • 10.16 Блок "Подвал сайта"29:53
  • 10.17 Валидация вёрстки04:12
  • 10.18 Production-сборка05:34
11. Заключительная часть
  • 11.1 Подведение итогов01:39
Завершение курса - Получение Сертификата

Начать обучение

Студенты также изучают

online_course
new
5
  • 97 видео
  • 34 часа
online_course
4.9
  • 31 видео
  • 65 заданий
  • 5 часов
online_course
4.9
  • 25 видео
  • 50 заданий
  • 4 часа
online_course
4.7
  • 10 видео
  • 21 заданий
  • 1 час
online_course
new
5
  • 48 видео
  • 19 часов
online_course
new
5
  • 28 видео
  • 14 часов

Отзывы студентов о курсе

Мы собрали отзывы учеников, прошедших онлайн курс. Оставьте свой отзыв после прохождения Курса Верстальщик сайтов - HTML, CSS, Bootstrap, JavaScript.

Владимир Подольский

Замечательный курс. пройденный совместно с Михаилом. Продолжаю учиться дальше, подойдя к освоению React. Тоже с Михаилом

Анна Каплина

Отличный курс. Подробный материал. Очень всё доходчиво доносится. Спасибо Михаилу за обучение

Наталия Селезнева

Курс очень понравился, спасибо! Все очень подробно разбирается, понятная подача материала. Спасибо!

viva lavida

Замечательный курс! Автор достаточно доступно объясняет трудный материал. Главное повторять и практиковать самому прошедшие уроки, и тогда результат будет намного лучше. Желаю всем продолжать учиться, а автору продолжать свой профессиональный рост!

Андрей Каряка

Я уже имею небольшой опыт в верстке. Но мне нужно было структурировать свои знания, подсмотреть неизвестное для себя. Все объясняется доступно, буду обучаться дальше на других курсах beonmax :)

student_NF8TdoIP

хороший курс

Олег Давлатов

Понравился данный курс. Все подробно преподнесено. Есть много ссылок на все необходимые учебники, вспомогательные программы, и ресурсы. Остался доволен!

Андрей Карпенко

много чего интересного

Sergey Shurkhovetski...

Отличный курс !

Жих Юлия Александров...

Очень понятный и подробный курс. Преподаватель объясняет все доступно.

student_3wQxUKl2

Автор профессионально объяснил использование в вёрстке макетов сайтов, структурных компонентов на основе языка HTML/CSS и показал преимущества языка JavaScript для ПК, планшетов и смартфонов. Различные фишки свойств, операторов и функций продемонстрировали его динамический подход к курсу, что сделало курс интересным для восприятия. Благодарю, Михаил, за качественную подготовку к созданию личного портфолио.

Максим Овчинников

Каждый раз узнаю что то новое для себя, когда прохожу очередные курсы и это меня радует))

Андрей Сергеевич Тар...

шикарный курс узнал много нового. преподаватель отличный.

Артем Вершинин

Очень подробный курс.

Александр Косолапов

Все гуд!

Валерий

Изучайте, но не забывайте уделять внимание самостоятельной работе - это важно.

Леонид Денисов

Хороший курс, узнал много нового.

Дмитрий Микулин

Обучение прошло нормально. В курсе подробно объясняют, но кое что искал сам.

Хить Юлия Андреевна

Прошла данный курс с большим удовольствием! Получила много полезной информации, которая является актуальной на сегодняшний день. Отдельное спасибо преподавателю за его манеру подачи материала. Супер!!!

Денис Немцов

Отличный курс, интересная подача материала.

student_xq3JdmyV

Курс отличнейший, учился ранее на *********, их курс просто жалкое подобие этого: обзор устаревших методик, отсутствие логически связанных элементов обучения, минимум видеоматериалов, минимум учебных материалов, все привязано к автору курса (который к слову не очень), плюс высокая стоимость обучения, сплошные дедлайны, нет системности, и многое другое. Из плюсов только практика. Этот же курс - полная противоположность :) авторам желаю успехов и процветания!

Мурат Бойтанов

По вёрстке это один их лучших курсов!!! Преподаватель - профи своего дела!!!

sergey guzovatuy

Очень крутой курс. Хотя я и не новичок, но много нового для себя узнал ! Автору курса отдельный респект))

Виталий Холод

Отличный курс! Все понравилось.

Олег Птицын

Отличный курс. Узнал очень много нового, особенно по JS по его практическому применению в создании сайтов. Выражаю свою благодарность автору.

Геннадий Холкин

Отличный курс! Много узнал полезного для себя.

Aivars Punka

Отличный курс, без воды, очень практичный. Но не легкий! Самый полезный курс для меня!

Jonathan Rise

Реально полезный курс

Виктория Михайлова

Большое спасибо за курс! Михаил преподносит инфу очень понятно, с объяснениями. Данный курс был очень полезен для меня.

Денис Улитин

Доступно объяснили, много материала. спасибо

Валентин Назаров

Мне очень понравился курс, много чего нового узнал, освежил в памяти материал!

Дмитрий Князев

Спасибо! Курс отличный - очень много материала, который не только рассказывается, но и демонстрируется на практическом использовании.

student_TQFl_SFr

Автор молодец, очень хорошо доносит, но, с JS все же у меня туго пошло, видимо, не было совсем никакой базы, в отличие от хтмл и css, рекомендовал бы изучить азы джаваскрипт перед проссмотром данного курса.

Михаил Мирошниченко

Курс очень хороший. Подойдет для новичков и профи. 5 из 5.

Anna Остапенко

Курс понравился. Много интересного и нового.

Александра Спиридоно...

Огромное спасибо за данный курс! Все понятно, все доступно. Для новичков просто маст хэв!

Олег Панов

Очень хороший курс для тех, кто хочет привести свои знания в порядок и восполнить в них пробелы! Материал излагается системно и понятно, позволяя увязать разрозненные знания в одно целое. Большое спасибо!

Роман

Отличные курсы, хорошие преподаватели. Спасибо BEONMAX

Игорь Дзигун

Отличный курс! Конкретно и без воды! Спасибо!

Кирилл Белов

Отличный курс! Михаил Непомнящий отлично преподаёт курс! Спасибо!)

Николай Ефимов

Спасибо! Было очень интересно. При подведении итогов стало чуть грустно, что курс закончился. Остается набивать руку.

Константин Мирошин

Спасибо, было полезно вновь обратить внимание, на верстку и библиотеки...))))

Vladimir Dochkin

Было интересно. Получил много знаний. Спасибо.

Александр Войцеховск...

Очень круто, много нового узнал для себя

Светлана

Спасибо автору. Очень структурировано, без лишней воды и с массой полезных мелочей, о которых зачастую забывают сказать, потому что для профи они само-собой понятны, а для начинающих очень важны. Редкое умение не упускать из виду нюансы и доходчиво рассказать про сложное.

Серегй Папанов

Отличный курс!!! Всё понятно и доходчиво

Александр Татьков

Курс очень понравился. Много интересной информации и хороших примеров. Спасибо за курс.

Чынгыз Акматов

Отличный курс! Объясняет очень доходчиво. Спасибо автору за шикарные уроки.

Игорь Бурдаев

Спасибо за курс, нашел в нем много полезных и интересных вещей.

Начать обучение

Преподаватель

Course Author
Михаил Непомнящий

О преподавателе курса

  • Профессиональный практик-преподаватель
  • По образованию - прикладной информатик
  • Работал и сотрудничал с крупными международными и российскими образовательными проектами

"Преподаю людям разных возрастов - от 8-ми лет до 60-ти. Любимая дисциплина - создание web-сайтов.

При создании обучающих видео стараюсь дать максимум полезной информации, при этом руководствуюсь принципом эффективности - без "воды" и "растеканию по дереву". Каждая минута видео уроков пройдет для Вас с пользой!"